
@primary_color: #0efffc;
@grad_color: #CCAC67;
.primary_color{
    color: @primary_color
}
.center{
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
}

.flex-center(){
    display: flex;
    justify-content: center;
    align-items: center;
}

.center-bw{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.show{
    display: flex;
}

.hide{
    display: none;
}

.btn(@color: @grad_color){
    width: 80px;
    height: 45px;
    border-radius: 5px;
    background-color: @color;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 18px;
    img {
        max-width: 20px;
        max-height: 20px;
    }
}

.relative{
    position: relative;
}
.form-control {
    border: none;
    display: inline-block;
    width: 330px;
    height: 40px;
    border-radius: 20px;
    background-color: #eeeeee;
    padding: 6px 20px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-image: none;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    margin-bottom: 20px;
    &:focus{
      border: 1px solid @primary_color!important;
    };
    &::-webkit-input-placeholder{
      font-size: 16px;
      color: #2f2f2f;
    }
  }

.active-line {
    width: 40px;
    height: 8px;
    border-radius: 4px;
    background-color: #0efffc;
    position: absolute;
    bottom: 0;
    box-shadow: 0px 6px 4px 0 rgba(14, 255, 252, 0.11);
}
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s, width 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
    width: 0;
}

